<template>
  <div>
  <div class="banner" @click="handleBannerClick">
    <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1502/f7/f7f32b8108836ce1.water.jpg_600x330_09226570.jpg">
    <div class="banner-info">
      <div class="banner-tittle">大连亚海洋世界（AAAA景区）</div>
      <div class="banner-number">
        <span class="iconfont banner-icon">&#xe63c;</span>39
      </div>
    </div>
  </div>
    <common-gallery
      :imgs="imgs"
      v-show="showGallery"
      @close="handleGalleryClose"
    ></common-gallery>
  </div>
</template>

<script>
  import CommonGallery from 'common/gallery/gallery'
  export default {
    name: 'banner',
    data () {
      return {
        showGallery:false,
        imgs:['http://img1.qunarzz.com/sight/p0/201310/24/ab6206568274c06fc8d65eac.jpg_r_800x800_38114f7f.jpg','http://img1.qunarzz.com/sight/p0/201310/24/ab6206568274c06fc8d65eac.jpg_r_800x800_38114f7f.jpg']
      }
    },
    methods:{
      handleBannerClick(){
        this.showGallery=true
      },
      handleGalleryClose(){
        this.showGallery=false
      }
    },
    components:{
      CommonGallery
    }
  }
</script>

<style scoped lang="stylus">
  .banner
    position:relative
    overflow :hidden
    height:0
    padding-bottom: 55%
    .banner-img
      width :100%
    .banner-info
      display :flex
      position:absolute
      left :0
      right:0
      bottom:0
      line-height :.6rem
      color:#fff
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
      .banner-tittle
        flex:1
        font-size: .32rem
        padding: 0 .2rem
      .banner-number
        height: .32rem
        line-height: .32rem
        margin-top: .14rem
        padding: 0 .4rem
        border-radius :.2rem
        font-size:.24 rem
        background :rgba(0,0,0,.8)
        .banner-icon
          font-size:.24rem
</style>
